  <template>
    <div class="main">
      <el-table
        :data="user"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column lable="头像" width="120">
          <template slot-scope="scope">  <!-- 使用template 标签表示把当前对象定义出来 包含行的对象所以 要访问值需要访问row属性-->
            <img :src="getImgUrl(scope.row.uimg)" style="width: 30px;height: 30px"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="uno"
          label="编号"
          width="130">
        </el-table-column>
        <el-table-column
          prop="uname"
          label="姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="ustate"
          label="状态"
          width="130">
        </el-table-column>
        <el-table-column
          prop="uphone"
          label="电话"
          width="130">
        </el-table-column>
        <el-table-column
          prop="uemail"
          label="邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="uaddr"
          label="地址">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEditUser(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleteUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageInfo.pageSize"
          layout="prev, pager, next, jumper"
          :total="pageInfo.itemCount">
        </el-pagination>
      </div>
      <el-button size="mini" @click="handleAddUser">
        新增
      </el-button>
      <addUser v-if="addDialogIsShow" ref="showAddUser"></addUser>
      <editUser v-if="editDialogIsShow" ref="showEditUser"></editUser>
      <deleteUser v-if="deleteDialogIsShow" ref="showdeleteUser"></deleteUser>

    </div>
</template>

<script>
  import api from "../../../../axios/api"
  import addUser from '@/components/back/user/addUser.vue'
  import editUser from '@/components/back/user/editUser.vue'
  import deleteUser from '@/components/back/user/deleteUser.vue'
  export default {
    name: "index",
    components : {
      addUser,
      editUser,
      deleteUser
    },
    data(){
      return {
        user:[],
        addDialogIsShow: false,
        editDialogIsShow:false,
        deleteDialogIsShow:false,
        currentPage: 1,
        pageInfo:{}
      }
    },
    methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.setDataFromAxios(val);
      },
        getImgUrl: function (uimg) {
          return  "/api/upload/images/user/" + uimg;
        },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2==0) {
          return 'warning-row';
        } else {
          return '';
        }
        return '';
      },
      setDataFromAxios:function(currPage){
        if(currPage!=null){
          this.currentPage = currPage;
        }
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/userController/getUsersByPage?currPage="+this.currentPage+"&pageSize=5",null,"post")
          .then(res=>{
            console.log(res);
            this.user = res.tList
            this.pageInfo = res.obj;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      handleAddUser:function() {
        let _this = this;
        _this.addDialogIsShow = true;
        _this.$nextTick(() => {
          _this.$refs.showAddUser.init();
        })
      },
      handleEditUser:function(index,user) {
        let _this = this;
        _this.editDialogIsShow = true;
        _this.$nextTick(() => {
          _this.$refs.showEditUser.init(user);
        })
      },
      handleDeleteUser: function (index, user) {
        let _this = this;
        _this.deleteDialogIsShow = true;
        _this.$nextTick(() => {
          _this.$refs.showdeleteUser.init(user);
        })
      }
    },
    //vue init方法 当前页面初始化就自动执行的方法 一般用于页面初始化就读取数据
    created:function () {

      this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
    }
  }
</script>

<style scoped lang="stylus">
  .main
    width 1300px
    margin 0 auto
  /deep/ .warning-row  /*不写deep渲染出错*/
    background-color oldlace
</style>
